<template>
  <ul class="todo-main">
        <li>
          <label>
            <input type="checkbox" :checked="itemObj.done" @click="checkId(itemObj.id)"/>
            <!-- 利用双向绑定来实现，本身就是true和false,并且初始化和改变时都能联动,但是不建议修改对象中的属性，要整个对象一起修改 -->
            <!-- <input type="checkbox" v-model="itemObj.done"/> -->
            <span v-show="!itemObj.edit">{{itemObj.title}}</span>
            <input type="text" v-show="itemObj.edit" :value="itemObj.title" @blur="handelBlur(itemObj,$event)" ref="inputTitle">
          </label>
          <button class="btn btn-danger" style="display:none;" @click="handDetele(itemObj.id)">删除</button>
          <button class="btn btn-eidt" v-show="!itemObj.edit" style="display:none;" @click="handEidt(itemObj)">编辑</button>
        </li>
      </ul>
</template>

<script>
export default {
  props: ['itemObj'],
  methods: {
    checkId (id) {
      console.log('看看谁被选中了', id)
      // this.checkTodo(id)
      // 给总线发数据过去
      this.$bus.$emit('checkTodo', id)
    },
    // 删除
    handDetele (id) {
      if (confirm('确定删除？')) {
        // this.deteleTodo(id)
        // 给总线发数据过去
        this.$bus.$emit('deteleTodo', id)
      }
    },
    // 编辑
    handEidt (itemObj) {
      // 拿到数据后，对数据进行整理
      // itemObj.edit = true  不可以这样给对象添加属性值，这样会没有响应式
      // 需要判断是否有edit,有就改，没有就加
      if (Object.prototype.hasOwnProperty.call(itemObj, 'edit')) {
        itemObj.edit = true
      } else {
      // 利用set来添加数据
        this.$set(itemObj, 'edit', true)
      }
      // 让其没有更改的时候，自动获取焦点,dom节点一旦发生变化就更新改变
      this.$nextTick(function () {
        this.$refs.inputTitle.focus()
      })
    },
    // 文本框变test的切换效果,失去焦点后准备更新主页数据
    handelBlur (itemObj, e) {
      itemObj.edit = false
      if (!e.target.value.trim()) return alert('输入不能为空')
      this.$bus.$emit('upDateObj', itemObj.id, e.target.value)
    }
  }
}
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  /* display: none; */
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover{
  background-color: #ddd;
}
li:hover button{
  display: block !important;
}
</style>
